<template>
  <div>
    <div class="n-layout-page-header">
      <n-card :bordered="false" title="授权管理">
        提供统一的用户权限管理功能，支持权限分配、撤销和查询。
      </n-card>
    </div>
    <n-card :bordered="false" title="授权信息列表" class="mt-4">
      <n-space vertical :size="16">
        <!-- 搜索栏 -->
        <n-space justify="space-between">
          <n-space>
            <n-input
              v-model:value="searchParams.keyword"
              placeholder="请输入用户姓名或唯一标识"
              style="width: 300px"
              clearable
            />
            <n-select
              v-model:value="searchParams.expertPool"
              placeholder="专家库筛选"
              :options="expertPoolOptions"
              style="width: 200px"
              clearable
            />
            <n-select
              v-model:value="searchParams.role"
              placeholder="角色筛选"
              :options="roleOptions"
              style="width: 150px"
              clearable
            />
            <n-button type="primary" @click="handleSearch">
              <template #icon>
                <n-icon>
                  <SearchOutline />
                </n-icon>
              </template>
              搜索
            </n-button>
            <n-button @click="handleReset">重置</n-button>
          </n-space>
          <n-space>
            <n-button type="primary" @click="handleBatchAuth">
              <template #icon>
                <n-icon>
                  <PeopleOutline />
                </n-icon>
              </template>
              批量授权
            </n-button>
            <n-button @click="handleExport">
              <template #icon>
                <n-icon>
                  <DownloadOutline />
                </n-icon>
              </template>
              导出权限
            </n-button>
          </n-space>
        </n-space>

        <!-- 数据表格 -->
        <n-data-table
          :columns="columns"
          :data="tableData"
          :loading="loading"
          :pagination="pagination"
          :row-key="rowKey"
          :row-selection="rowSelection"
          @update:page="handlePageChange"
          @update:checked-row-keys="handleCheck"
        />
      </n-space>
    </n-card>

    <!-- 批量授权弹窗 -->
    <n-modal
      v-model:show="showBatchModal"
      title="批量授权"
      preset="card"
      style="width: 600px"
      :mask-closable="false"
    >
      <n-form
        ref="batchFormRef"
        :model="batchFormData"
        :rules="batchRules"
        label-placement="left"
        :label-width="120"
        require-mark-placement="right-hanging"
      >
        <n-form-item label="专家库" path="expertPoolId">
          <n-select
            v-model:value="batchFormData.expertPoolId"
            :options="expertPoolOptions"
            placeholder="请选择专家库"
          />
        </n-form-item>
        <n-form-item label="权限角色" path="role">
          <n-radio-group v-model:value="batchFormData.role">
            <n-space>
              <n-radio value="admin">管理员</n-radio>
              <n-radio value="user">普通用户</n-radio>
            </n-space>
          </n-radio-group>
        </n-form-item>
        <n-form-item label="授权用户">
          <n-transfer
            v-model:value="batchFormData.userIds"
            :options="userOptions"
            :source-filterable="true"
            :target-filterable="true"
            source-filter-placeholder="搜索用户"
            target-filter-placeholder="搜索已选用户"
          />
        </n-form-item>
        <n-form-item label="备注" path="remark">
          <n-input
            v-model:value="batchFormData.remark"
            type="textarea"
            placeholder="请输入备注信息"
            :rows="2"
          />
        </n-form-item>
      </n-form>
      <template #footer>
        <n-space justify="end">
          <n-button @click="showBatchModal = false">取消</n-button>
          <n-button type="primary" :loading="batchSubmitLoading" @click="handleBatchSubmit">
            确定
          </n-button>
        </n-space>
      </template>
    </n-modal>

    <!-- 权限详情抽屉 -->
    <n-drawer v-model:show="showDetail" :width="600" placement="right">
      <n-drawer-content title="权限详情" closable>
        <n-descriptions :column="1" bordered v-if="currentUser">
          <n-descriptions-item label="用户姓名">{{ currentUser.name }}</n-descriptions-item>
          <n-descriptions-item label="唯一标识">{{ currentUser.employeeId }}</n-descriptions-item>
          <n-descriptions-item label="邮箱">{{ currentUser.email }}</n-descriptions-item>
          <n-descriptions-item label="手机号">{{ currentUser.phone }}</n-descriptions-item>
        </n-descriptions>
        
        <n-divider title-placement="left">权限详情</n-divider>
        
        <n-list>
          <n-list-item v-for="permission in userPermissions" :key="permission.id">
            <n-thing>
              <template #header>
                <n-space align="center">
                  <span>{{ permission.expertPoolName }}</span>
                  <n-tag :type="permission.role === 'admin' ? 'success' : 'info'">
                    {{ permission.role === 'admin' ? '管理员' : '普通用户' }}
                  </n-tag>
                </n-space>
              </template>
              <template #description>
                <div>授权时间：{{ permission.authTime }}</div>
                <div v-if="permission.remark">备注：{{ permission.remark }}</div>
              </template>
              <template #action>
                <n-button 
                  size="small" 
                  type="error" 
                  ghost 
                  @click="handleRevokePermission(permission)"
                >
                  撤销权限
                </n-button>
              </template>
            </n-thing>
          </n-list-item>
        </n-list>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>

<script lang="ts" setup>
import { useAuthorization } from './index';

const {
  // 搜索相关
  searchParams,
  roleOptions,
  expertPoolOptions,
  userOptions,
  // 表格相关
  loading,
  tableData,
  checkedRowKeys,
  pagination,
  rowSelection,
  columns,
  rowKey,
  // 批量授权相关
  showBatchModal,
  batchSubmitLoading,
  batchFormRef,
  batchFormData,
  batchRules,
  // 权限详情相关
  showDetail,
  currentUser,
  userPermissions,
  // 方法
  handleCheck,
  handleSearch,
  handleReset,
  handlePageChange,
  handleBatchAuth,
  handleBatchSubmit,
  handleExport,
  handleViewDetail,
  handleRevoke,
  handleRevokePermission,
  // 图标组件
  SearchOutline,
  PeopleOutline,
  DownloadOutline,
  EyeOutline,
  TrashOutline,
} = useAuthorization();
</script>

<style scoped src="./index.css"></style> 